<template>
  <div id="app">
    <router-view name="header"></router-view>
    <transition :name="transitionName">
     <router-view name='content'></router-view>
    </transition>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  name: 'App',
  data () {
    return {
      transitionName: 'slide-fade',
      title: '个人中心'
    }
  },
  mounted () {
    var uid = this.$cookie.get('uid')
    var token = this.$cookie.get('token')
      setTimeout(() => {
      if (uid && token) {
            this.$router.push(`${this.$route.fullPath}`)
      } else {
        if (this.$route.query.ref_code) {
          this.$router.push(`/login?ref_code=${this.$route.query.ref_code}`)
        } else {
          this.$router.push(`/login`)
        }
      }
    },1000)
  },
  watch: {
    $route (to, from) {
      this.$Indicator.open({
      text: 'Loading...',
      spinnerType: 'fading-circle'
    })
    setTimeout(() => {
      this.$Indicator.close()
    },300)
      this.title = to.meta.title
      this.$apiPost('userstatus',{}).then((data) => {
        if (data.status === 0) {
          if (data.data.recode === 1003) {
            this.$router.push('/payment_succ')
          } else if (data.data.recode === 1001) {
            this.$router.push('/login_info')
          } else if (data.data.recode === 1002) {
            if (to.name === 'submit_info') {
               this.$router.push('/submit_info')
            } else if (to.name === 'login_info') {
               this.$router.push('/login_info')
            } else {
              this.$router.push('/payment')
            }
          }
        } else if (data.status === 30003){
          MessageBox({
            title: '提示',
            message: '您的账号登录状态已过期，请重新登陆'
          }).then(() => {
            if (this.$route.query.ref_code) {
              this.$router.push(`/login?ref_code=${this.$route.query.ref_code}`)
            } else {
              this.$router.push(`/login`)
            }
            this.$cookie.delete('uid')
            this.$cookie.delete('token')
          })
        } 
      })
    var uid = this.$cookie.get('uid')
    var token = this.$cookie.get('token')
      setTimeout(() => {
      if (uid && token) {
            this.$router.push(`${this.$route.fullPath}`)
      } else {
        if (this.$route.query.ref_code) {
          this.$router.push(`/login?ref_code=${this.$route.query.ref_code}`)
        } else {
          this.$router.push(`/login`)
        }
      }
    },1000)
    }
  },
  components: {
  }
}
</script>

<style lang='scss'>
@import '~lib/reset.scss';
html,body,#app {
    @include rect(100%,100%);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-overflow-scrolling:touch
}
#app{
    @include flexbox();
    @include flex-direction(column);
    background-color: #F5F5F5;
    header{
      @include rect(100%,0.5rem);
      @include background-color(#fff);
      @include border(0 0 0.01rem 0,#e7e7e7);
      ul{
         @include rect(100%,100%);
         @include flexbox();
         li{
           padding:0 0.1rem 0 0.1rem;
           @include line-height(0.5rem);
           &:nth-of-type(1),&:nth-of-type(3){
             width: 80px;
             height: 100%;
           }
           &:nth-of-type(2){
             @include text-align();
             @include flex();
           }
           
         }
      }
    }
    .content{
      @include flex();
      @include rect(100%,100%);
      overflow: auto
    }
}
.slide-fade-enter-active {
  transition: all .6s ease;
}
.slide-fade-leave-active {
  transition: all 0s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-leave-to{
  opacity:0.6;
}
.slide-fade-enter{
  opacity:0;
}
</style>
